
$(function () {
	// 获取品牌列表
	$.ajax({
		type: "POST",
		async:false,
		url: baseURL + 'sys/bbrandinfo/queryAll',
		contentType: "application/json",
		success: function(r){
			if(r.code==0){
				for(var i=0;i<r.brandInfo.length;i++){
					$("#allBrandNames").append(
						"<option value=" + r.brandInfo[i].brandName +"></option>");
				}
			}
		}
	});
});

var vm = new Vue({
	el:'#rrapp',
	data:{
		brandId: null,
		brandName: null,
		content: null,
		newContents: null,
		index: null
	},
	methods: {
		// 品牌切换时，对应的 onchange 事件的函数
		updateBrand: function() {
			debugger
			if (vm.brandName == null || vm.brandName == '') {
				vm.brandId = null;
				return;
			}
			$.ajax({
				type: "POST",
				url: baseURL + 'sys/bbrandinfo/queryByName',
				contentType: "application/json",
				data: '{"brandName": "'+this.brandName+'"}',
				success: function(r) {
					if (r.code == 0) {
						// 获取品牌ID
						vm.brandId = r.brandInfo.id;
					}
				}
			});
		},
		// 更新文章内容
		updateArticleContent: function() {
			// 1、参数校验
			if (!this.validateParam()) {
				return;
			}

			let msg = "原内容【" + vm.content + "】<br\>替换为<br\>新内容【" + vm.newContents + "】";

			layer.confirm("您确定要替换文章的内容吗？<br\><br\>" + msg, {icon: 0, title:'提示', area: ['500px', '300px']}, function (index) {
				layer.close(index);
				// 2、ajax 请求：更新文章内容
				$.ajax({
					type: "POST",
					url: baseURL + 'sys/barticleinfo/updateArticleContent',
					traditional: true,
					data: {"brandId": vm.brandId, "content": vm.content, "newContents": vm.newContents.split(",")},
					success: function(r) {

					}
				});

				// 3、打开进度条窗口
				vm.progressView();

				// 4、按固定时间请求一次服务器，获取当前进度条数据
				let total = 0;
				let timer = setInterval(function () {
					$.ajax({
						type: "GET",
						url: baseURL + 'sys/barticleinfo/getProgressInfo',
						contentType: "application/json;charset=UTF-8",
						success: function(r) {
							debugger
							total = r.progressInfo.total;// 总任务数量
							let current = r.progressInfo.current;// 当前数量
							let percent = r.progressInfo.percent;// 当前百分比
							let flag = r.progressInfo.flag;// true: 任务数为0

							$("#progressDiv span").eq(0).text(" " + current + " / " + total);
							$("#progressDiv .progress-bar").eq(0).text(percent + "%");
							$("#progressDiv .progress-bar").eq(0).css("width", percent + "%");
							$("#progressDiv .progress-bar").eq(0).attr("aria-valuenow", percent);
							if (current != 0 && current == total) {// 任务完成
								// 关闭定时函数
								clearInterval(timer);
								// 提示窗口
								layer.open({
									type: 0,
									title: '提示',
									content: '替换已完成',
									closeBtn: 0,
									yes: function(index, layero){
										layer.close(vm.index);// 关闭进度条窗口
										layer.close(index);// 关闭提示窗口
									}
								});
							}
							if (flag) {
								// 关闭定时函数
								clearInterval(timer);
								// 提示窗口
								layer.open({
									type: 0,
									title: '提示',
									content: '没有匹配的数据',
									closeBtn: 0,
									yes: function(index, layero){
										layer.close(vm.index);// 关闭进度条窗口
										layer.close(index);// 关闭提示窗口
									}
								});
							}
						}
					});
				}, 1000);
			});
		},
		// 参数检验
		validateParam: function() {
			// 1、失去焦点
			$("#selectBrandName").blur();
			$("#content").blur();
			$("#newContents").blur();

			// 2、非空判断
			let flag = false;
			if (this.brandId == null || this.brandId == '') {
				alert("品牌不能为空！");
				return flag;
			}
			if (this.content == null || this.content == '') {
				alert("文章原内容不能为空！");
				return flag;
			}
			if (this.newContents == null || this.newContents == '') {
				alert("文章新内容不能为空！");
				return flag;
			}
			if (this.content == this.newContents) {
				alert("原内容和新内容不能一样");
				return flag;
			}
			return !flag;
		},
		progressView: function () {
			// 初始化进度条的值
			$("#progressDiv span").eq(0).text("初始化...");
			$("#progressDiv .progress-bar").eq(0).text("0%");
			$("#progressDiv .progress-bar").eq(0).css("width", "0%");
			$("#progressDiv .progress-bar").eq(0).attr("aria-valuenow", "0");

			vm.index = layer.open({
				type: 1,
				title: '更新文章',
				area: ["800px", "200px"],
				closeBtn: 0,
				shadeClose: false,
				content: $("#progressView"),
				anim: 2
			});
		}
	}
});